<template>
  <div class="container"  v-if="model">
    <img class="brand-banner-pic" mode="aspectFill" :src="model.background">
    <div class="brand-head">
      <van-row>
        <van-col span="4">
          <img class="brand-pic" :src="model.logo + '?imageView2/1/w/120/h/120/q/75'">
        </van-col>
        <van-col span="18">
          <van-col span="22">
            <div class="brand-title">{{model.display_name}}</div>
          </van-col>
          <van-col span="2">
            <button class="share-btn" type="default" size="mini" open-type="share">
              <van-icon name="share" color="#fff"/>
            </button>
          </van-col>
          <van-col span="24">
            <div class="count">共有{{model.count || 0 }}件商品</div>
          </van-col>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="22">
          <div class="desc">{{model.introduction}}</div>
        </van-col>
      </van-row>
    </div>
    <div class="pro-list" v-if="productsList&&productsList.length">
     <van-row gutter="10">
        <van-col span="12" v-for="(item, index) in productsList" :key="index" :index="index">
          <div class="pro-item" @click="goProductInfo(item.id)">
            <img v-if="item.images" class="pro-pic" mode="aspectFill" :src="item.images[0] + '?imageView2/1/w/320/h/320/q/75'">
            <div class="info">
              <div class="desc">{{item.title}}</div>
              <p class="price">￥{{item.price}}</p>
            </div>
          </div>
        </van-col>
    </van-row>
    </div>
    <van-toast id="van-toast" />
    <page-footer/>
  </div>
</template>
<script>
import * as ProductAction from '@/api/product'
import pageFooter from '@/components/page-footer.vue'
import Toast from 'vant-weapp/dist/toast/toast'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      model: null,
      productsList: [],
      page: 1
    }
  },
  computed: {
    ...mapState(['me'])
  },
  components: {
    pageFooter
  },
  onReachBottom () {
    this.page += 1
    wx.showNavigationBarLoading()
    this.getProducts()
  },
  onLoad (query) {
    this.model = null
    this.productsList = []
    this.page = 1
    wx.showNavigationBarLoading()
    wx.showShareMenu({ withShareTicket: true })
    if (query.code) wx.setStorageSync('__inviteCode', query.code)
    if (query.id) {
      this.fetchModel()
      this.getProducts()
    } else { wx.switchTab({ url: '../home/index' }) }
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.page = 1
    this.productsList = []
    if (this.$root.$mp.query.id) {
      this.fetchModel()
      this.getProducts()
    } else { wx.switchTab({ url: '../home/index' }) }
    wx.stopPullDownRefresh()
  },
  onShareAppMessage (res) {
    return {
      title: this.shareTitle(),
      path: this.sharePath()
    }
  },
  methods: {
    getProducts () {
      let params = {
        brand_id: this.$root.$mp.query.id,
        page: this.page
      }
      ProductAction.list(params)
        .then(data => {
          if (data.data.length > 0) {
            this.productsList = this.productsList.concat(data.data)
          }
          wx.hideNavigationBarLoading()
        })
        .catch(err => console.log(err))
    },
    fetchModel () {
      ProductAction.brandDetail(this.$root.$mp.query.id)
        .then(data => {
          this.model = data
          wx.setNavigationBarTitle({ title: data.display_name })
        })
        .catch(err => Toast(err.msg))
    },
    goProductInfo (id) { wx.navigateTo({ url: '../product/detail?id=' + id }) },
    shareTitle () {
      if (!this.model) return
      if (!this.me) return `美控小管家向您推荐了${this.model.display_name}品牌`
      if (this.me) return `${this.me.nickname}向您推荐了${this.model.display_name}品牌`
    },
    sharePath () {
      if (!this.me) return '/pages/brand/index?id=' + this.model.id
      if (this.me && this.me.invite_code) return '/pages/brand/index?code=' + this.me.invite_code + '&id=' + this.model.id
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background: #f8f8f8;
  min-height:667px;
  position:relative;
  .brand-banner-pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    height: 215rpx;
    overflow: hidden;
  }
  .brand-head {
    position: absolute;
    z-index: 100;
    color: #fff;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10rpx;
    height: 200rpx;
    overflow: hidden;
    .brand-pic {
      width: 100rpx;
      height: 100rpx;
      margin: 10rpx 10rpx 0 10rpx;
    }
    .brand-title {
      font-weight: bolder;
      font-size: 35rpx;
      padding: 10rpx;
    }
    .share-btn {
      position: relative;
      top: 38rpx;
      font-size: 30rpx;
      background: transparent;
      border: none;
    }
    .count {
      font-size: 24rpx;
      padding-left: 10rpx;
    }
    .desc {
      .count;
      line-height: 1.6;
    }
  }
  .pro-list {
    margin-top: 228rpx;
  }
}
</style>

